<template>
  <div
    class="home-container"
    id="test"
    ref="homeContainer"
    @wheel="handleWheel"
    v-loading="loading"
  >
    <ul
      class="carousel-container"
      :style="{
        marginTop,
      }"
      @transitionend="handleTransitionEnd"
    >
      <li v-for="item in data" :key="item.id">
        <CarouselItem :carousel="item" :title="item.title"></CarouselItem>
      </li>
    </ul>
    <!--    箭头-->
    <div
      class="icon icon-up"
      v-show="curIndex >= 1"
      @click="switchTo(curIndex - 1)"
    >
      <Icon type="arrowUp"></Icon>
    </div>
    <div
      class="icon icon-down"
      v-show="curIndex < data.length - 1"
      @click="switchTo(curIndex + 1)"
    >
      <Icon type="arrowDown"></Icon>
    </div>
    <!--    小圆点-->
    <ul class="indicator">
      <li
        v-for="(item, i) in data"
        :key="item.id"
        :class="{
          active: i === curIndex,
        }"
        @click="switchTo(i)"
      ></li>
    </ul>
  </div>
</template>

<script>
import CarouselItem from "./CarouselItem";
import Icon from "@/components/Icon";
import Loading from "@/components/Loading"
import {mapState} from "vuex";

export default {
  name: "Home",
  data() {
    return {
      curIndex: 0, // 当前正在显示哪一个
      containerHeight: 0,
      switching: false,
    };
  },
  components: {
    Icon,
    CarouselItem,
    Loading
  },
  computed: {
    marginTop() {
      return -this.curIndex * this.containerHeight + "px";
    },
    ...mapState("banner", ["loading", "data"])
  },
  methods: {
    switchTo(index) {
      this.curIndex = index;
    },
    handleWheel(event) {
      if (this.switching) {
        return undefined;
      }
      if (event.deltaY < -5 && this.curIndex > 0) {
        // 向下滚动
        this.switching = true;
        this.curIndex--;
      }
      if (event.deltaY > 5 && this.curIndex < this.data.length - 1) {
        // 向上滚动
        this.switching = true;
        this.curIndex++;
      }
    },
    handleTransitionEnd() {
      this.switching = false;
    },
    handleResize() {
      let homeContainer = this.$refs.homeContainer;
      this.containerHeight = homeContainer.clientHeight;
    },
  },
  /* * --------------------- 生命周期函数 ----------------------*/
  mounted() {
    let homeContainer = this.$refs.homeContainer;
    this.containerHeight = homeContainer.clientHeight;
    window.addEventListener("resize", this.handleResize);
  },
  created() {
    this.$store.dispatch("banner/fetchBanner");
  },
  // * 这个组件死球了
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";

.home-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }
}

.carousel-container {
  width: 100%;
  height: 100%;
  transition: all 0.4s;

  li {
    width: 100%;
    height: 100%;
  }
}

.icon {
  @gap: 25px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  color: @gray;
  cursor: pointer;

  &.icon-up {
    top: @gap;
    animation: jump-up 2.8s infinite;
  }

  &.icon-down {
    bottom: @gap;
    animation: jump-down 2.8s infinite;
  }

  @jump: 5px; // 箭头跳动的范围
  // * 上箭头
  @keyframes jump-up {
    0% {
      transform: translate(-50%, @jump);
    }
    50% {
      transform: translate(-50%, -@jump);
    }
    100% {
      transform: translate(-50%, @jump);
    }
  }
  @keyframes jump-down {
    0% {
      transform: translate(-50%, -@jump);
    }
    50% {
      transform: translate(-50%, @jump);
    }
    100% {
      transform: translate(-50%, -@jump);
    }
  }
}

.indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;

  li {
    width: 10px;
    height: 10px;
    background-color: @words;
    border-radius: 50%;
    border: 1px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 10px;

    &.active {
      background-color: #fff;
    }
  }
}
</style>
